.banner{
    width: 100%;
    height: 700px;
    overflow: hidden;
    position: relative;
     
    img{
        width: 100%;
        height: 100%;
    }
    
    .list-item{
        background-repeat:no-repeat ;
        background-position:50% 0;
        display: inline-block;
    }
    
    .Banner-controller{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        
       .controller-warpper{
           width: 100%;
           height: 100%;
           position: relative;
           z-index: 2;
           
           .controller-btn{
               position: absolute;
               height: 110px;
               top: 42%;
               width: 60px;
               cursor: pointer;
               
               i{
                    font-size: 80px;
                    color: rgb(230,190,108); 
               }  
               
               &:hover{
                   opacity: 0.6;
               }
           }
           
           .prevPage{
               left: 60px;
           }
           
           .nextPage{
               right: 60px;
           }
           
           
           .controller-bar{
               width: 100%;
               height: 60px;
               position: absolute;
               bottom: 0;
               left: 0;
//             background: rgba(0,0,0,0.8);
               line-height: 60px;
               text-align: center;
               
               .bar-item{
                   width: 76px;
                   height: 10px;
                   background: #fff;
                   display: inline-block;
                   margin-left: 10px;
                   cursor: pointer;
               }
               .active{
                   background: #C6A63C;
               }
           }
       }
    }
}
.banner-list{
    position: relative; 
    z-index: 1;
}